<template>
  <div
    class="register-page flexbox flex-tb flex-center bg-center bg-no-repeat lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav rightPath="/login" />
    </div>

    <div class="register-box flexbox">
      <img
        loading="lazy"
        class="box-bg object-cover !z-[1]"
        src="https://cd.sealmg.com/assets/img/login-box-bg.png"
        alt="Registration form background"
        title="Form container background"
      />
      <div class="left flex-1 z-[999]">
        <NuxtLink :to="localePath('/')">
          <div class="title flexbox flex-align-center">
            <img loading="lazy" class="img" src="https://cd.sealmg.com/assets/img/logo-img1.png" alt="SEALMG logo" title="Company logo" />
          </div>
        </NuxtLink>
        <div class="desc">
          <div class="text1">{{ $t('login.welcomeText') }}</div>
          <div class="text2">{{ $t('login.welcomeDesc') }}</div>
        </div>
        <div class="handle">
          <div class="flexbox flex-align-center">
            <Langes langTheme="gray" :onlyLange="false" />
            <NuxtLink :to="localePath('/login')">
              <div class="register-btn flexbox flex-center">
                <span class="text">{{ $t('formBtn.login') }}</span>
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
      <div class="right z-[2]">
        <h1 class="title capitalize">{{ $t('register.formTitle') }}</h1>
        <div class="desc">{{ $t('register.formDesc') }}</div>
        <div class="form pc-form">
          <el-form label-position="top" label-width="80px" :model="form" @submit.native.prevent>
            <el-form-item :label="$t('formItem.email')">
              <el-input v-model="form.email" type="email" :placeholder="$t('formPlaceholder.input')" @keyup.enter.native="submitEmamil">
                <img
                  loading="lazy"
                  slot="prefix"
                  class="input-icon"
                  src="https://cd.sealmg.com/assets/img/email-icon.png"
                  alt="Email input icon"
                  title="Email field icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
          <el-button class="theme-btn one-line" :loading="loading" :disabled="!form.email" @click="submitEmamil">
            {{ $t('formBtn.sendVerifyEmail') }}
          </el-button>
        </div>
        <div class="form mobile-form">
          <el-form label-position="top" label-width="80px" :model="form" @submit.native.prevent>
            <el-form-item :label="$t('formItem.email')">
              <el-input
                v-model="form.email"
                type="email"
                :placeholder="$t('formPlaceholder.input')"
                @keyup.enter.native="submitEmamil({ showCheck: true })"
              >
                <img
                  loading="lazy"
                  slot="prefix"
                  class="input-icon"
                  src="https://cd.sealmg.com/assets/img/email-icon.png"
                  alt="https://cd.sealmg.com/assets/img/email-icon.png"
                />
              </el-input>
            </el-form-item>
          </el-form>
          <el-button class="theme-btn one-line" :loading="loading" :disabled="!form.email" @click="submitEmamil({ showCheck: true })">
            {{ $t('formBtn.sendVerifyEmail') }}
          </el-button>
        </div>
        <other-login />
        <div></div>
      </div>
    </div>
    <base-info />
    <!-- 
    <el-dialog class="mobile-dialog" title="" :show-close="false" :visible.sync="showCheck">
      <div class="register-check-box flexbox flex-tb flex-align-center">
        <img
          class="top-icon"
          loading="lazy"
          src="https://cd.sealmg.com/assets/img/verify-email-img.png"
          alt="Email verification icon"
          title="Verification illustration"
        />
        <div class="title">{{ $t('register.verifyEmail') }}</div>
        <div class="desc">{{ $t('register.verifyDescLeft') }} {{ form.email }} {{ $t('register.verifyDescRight') }}</div>
        <div class="form">
          <el-button class="theme-btn one-line" :disabled="form.email ? false : true" @click="submitLink">{{ $t('register.checkEmail') }}</el-button>
        </div>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog> 
    -->
    <el-dialog title="" :show-close="false" class="" :visible.sync="showCheck" top="20vh">
      <div class="flex flex-col">
        <div class="flex justify-center">
          <img src="~/assets/img/ico_Email_88@3X.png" class="size-[88px] text-center" alt="" />
        </div>
        <div class="flex flex-col gap-4">
          <div class="text-[24px] text-[#141414] font-medium text-center">{{ $t('pages.emailNotification') }}</div>
          <div class="text-[14px] text-[#999999] font-medium text-center">
            {{ $t('pages.codeSentTo') }}
            {{ form.email }}
            {{ $t('pages.codeSentTo1') }},

            {{ $t('pages.clickToVerify') }},

            {{ $t('pages.checkSpamBox') }}
          </div>
          <div class="lg:g:gap-6 grid grid-cols-3 gap-2">
            <div class="col-span-1">
              <button
                class="font-medium w-full text-[16px] text-[#262626] lg:h-[45px] h-[40px] bg-[#FFFFFF] rounded-[24px] border text-nowrap"
                @click="showCheck = false"
              >
                {{ $t('formBtn.cancel') }}
              </button>
            </div>
            <div class="col-span-2" @click="submitLink">
              <button class="font-medium w-full text-[16px] text-[#FFFFFF] lg:h-[45px] h-[40px] bg-[#FF4E33] rounded-[24px] text-nowrap">
                {{ $t('formBtn.confirm') }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import FnNav from '@/components/mobile/FnNav'
  import { throttle } from '@/static/js/common'
  export default {
    name: 'register',
    components: {
      FnNav
    },
    data() {
      return {
        form: {
          email: ''
        },
        showCheck: false,
        loading: false // 添加 loading 状态
      }
    },
    created() {},
    computed: {
      initData() {
        return this.$store.state.initData.initData || {}
      }
    },
    head() {
      return {
        title: 'Register - SEALMG',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'Register an SEALMG account, you can easily and quickly buy your favorite games, gift cards, top-ups. SEALMG has many offers and discounts waiting for you, register now!'
          }
        ]
      }
    },

    methods: {
      golink() {
        if (process.client) {
          window.open('https://beian.miit.gov.cn/#/Integrated/index')
        }
      },

      submitEmamil: throttle(
        function (type) {
          if (!this.form.email) return
          this.loading = true // 开始请求时设置 loading
          this.$axios
            .post(`/api/ems/sendHtml`, {
              email: this.form.email,
              event: 'register'
            })
            .then(res => {
              this.$router.replace({
                path: this.localePath('/check'),
                query: {
                  email: this.form.email
                }
              })
              // if (res.data.code == 1) {
              //   this.showCheck = true
              // }
              console.log('🚀 ~ res:', res)
              return
            })
            .finally(() => {
              this.loading = false // 请求完成后重置 loading
            })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      getEmailServerUrl(email) {
        let serverMap = {
          'qq.com': 'http://mail.qq.com',
          'vip.sina.com': 'http://mail.sina.com.cn',
          'sina.com': 'http://mail.sina.com.cn',
          '163.com': 'http://mail.163.com',
          '126.com': 'http://mail.126.com',
          'vip.163.com': 'http://vipmail.163.com/',
          'vip.126.com': 'http://vipmail.163.com/',
          'yeah.net': 'http://www.yeah.net/',
          'sohu.com': 'http://mail.sohu.com/',
          'tom.com': 'http://mail.tom.com/',
          '139.com': 'http://mail.10086.cn/',
          'live.com': 'http://login.live.com/',
          '189.com': 'http://webmail16.189.cn/',
          'eyou.com': 'http://www.eyou.com/',
          '21cn.com': 'http://mail.21cn.com/',
          '188.com': 'http://www.188.com/',
          'yahoo.com': 'http://login.yahoo.com',
          // 添加国外常用邮箱
          'gmail.com': 'https://mail.google.com',
          'outlook.com': 'https://outlook.live.com',
          'hotmail.com': 'https://outlook.live.com',
          'msn.com': 'https://outlook.live.com',
          'icloud.com': 'https://www.icloud.com/mail',
          'me.com': 'https://www.icloud.com/mail',
          'mac.com': 'https://www.icloud.com/mail',
          'aol.com': 'https://mail.aol.com',
          'protonmail.com': 'https://mail.proton.me',
          'zoho.com': 'https://mail.zoho.com',
          'yandex.com': 'https://mail.yandex.com',
          'mail.com': 'https://www.mail.com/mail'
        }
        let server = email.split('@')[1]
        return serverMap[server] || ''
      },
      submitLink() {
        let url = this.getEmailServerUrl(this.form.email)
        if (process.client && url) {
          this.showCheck = false
          window.open(url)
        } else {
          this.$router.replace({
            path: this.localePath('/login')
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-message {
    z-index: 9999 !important;
  }
  /deep/ .el-dialog {
    background: @color-ff;
    border-radius: 12px;
    @apply lg:w-[452px] w-4/5;
  }

  /deep/ .el-dialog__header,
  .el-dialog__footer {
    padding: 0;
  }

  .register-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    .login-header {
      display: none;
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
  }
  .register-box {
    width: 960px;
    height: 574px;
    box-sizing: border-box;
    overflow: hidden;
    // background: linear-gradient( 330deg, #FF8062 0%, #FF4029 100%);
    box-shadow: 0px 16px 32px 0px rgba(88, 26, 6, 0.16);
    border-radius: 32px;
    position: relative;
    .box-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 960px;
      height: 574px;
      border-radius: 32px;
      z-index: -1;
    }
    .left {
      padding: 0 32px;
      height: 574px;
      .title {
        margin-top: 40px;
        .icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
          background: @color-ff;
          border-radius: 4px;
        }
        .img {
          width: 157px;
          height: 46px;
          // background: @color-ff;
        }
        .text {
          left: 46px;
          font-family: Aemstel, Aemstel;
          font-weight: 400;
          font-size: 24px;
          color: @color-ff;
        }
      }
      .desc {
        margin-top: 75px;
        .text1 {
          margin-bottom: 16px;
          font-family: YouSheBiaoTiHei;
          font-size: 44px;
          color: @color-ff;
        }
        .text2 {
          max-width: 297px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: @color-ff;
        }
      }
      .handle {
        position: absolute;
        left: 32px;
        bottom: 32px;
        .register-btn {
          box-sizing: border-box;
          padding: 0 24px;
          height: 32px;
          margin-left: 16px;
          cursor: pointer;
          border-radius: 24px;
          border: 1px solid @color-ff;
          .text {
            font-weight: 500;
            font-size: 12px;
            color: @color-ff;
          }
        }
        .time {
          margin-top: 32px;
          font-weight: 400;
          font-size: 12px;
          color: @color-ff;
          .link {
            cursor: pointer;
          }
        }
      }
    }
    .right {
      width: 515px;
      height: 574px;
      box-sizing: border-box;
      background: @color-ff;
      border-radius: 32px;
      .title {
        margin-top: 90px;
        font-weight: 600;
        font-size: 24px;
        color: @font-color-26;
        text-align: center;
      }
      .desc {
        margin-top: 12px;
        font-size: 14px;
        color: @font-color-26;
        text-align: center;
      }
      .form {
        margin-top: 32px;
        padding: 0 72px;
        .el-form-item {
          margin-bottom: 15px;
        }
        .el-form {
          position: relative;
        }
        /deep/ .el-form--label-top .el-form-item__label {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
          padding: 0;
          margin-bottom: 6px;
        }
        /deep/ .el-input__inner {
          color: @font-color-14;
        }
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 54px;
        }
        /deep/ .el-input__prefix {
          left: 12px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
        }
        .theme-btn {
          height: 50px;
          margin-top: 9px;
        }
        /deep/ .el-input__prefix {
          @apply flex items-center;
        }
      }
      .pc-form {
        display: block;
      }
      .mobile-form {
        display: none;
      }
    }
  }
  .mobile-dialog {
    display: none;
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .register-page {
      position: relative;
      justify-content: flex-start;
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 736px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-header {
        display: block;
      }
    }
    .register-box {
      width: 768px;
      height: auto;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: none;
      position: relative;
      .box-bg {
        display: none;
      }
      .left {
        display: none;
      }
      .right {
        padding: 24px 16px;
        width: 768px;
        height: auto;
        box-sizing: border-box;
        background: transparent;
        .title {
          margin-top: 24px;
          color: @font-color-14;
          text-align: left;
        }
        .desc {
          margin-top: 8px;
          font-size: 14px;
          color: @font-color-99;
          text-align: left;
        }
        .form {
          margin-top: 24px;
          padding: 0;
          .el-form-item {
            margin-bottom: 10px;
          }
          .theme-btn {
            box-sizing: border-box;
            padding: 0 16px;
            height: 48px;
            margin-left: 0;
            margin-top: 14px;
          }
        }
        .pc-form {
          display: none;
        }
        .mobile-form {
          display: block;
        }
      }
    }
    /deep/.base-info {
      // margin-top: 82px;
      padding-bottom: 86px;
    }
    .mobile-dialog {
      display: block;
      /deep/ .el-dialog {
        width: 293px;
        background: @color-ff;
        border-radius: 12px;
        .el-dialog__header,
        .el-dialog__footer {
          padding: 0;
        }
        .el-dialog__body {
          padding: 0;
        }
      }
      .register-check-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28px;
        .top-icon {
          margin-top: 20px;
          width: 88px;
          height: 88px;
        }
        .title {
          margin-top: 12px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          margin-top: 12px;
          text-align: center;
          font-size: 14px;
          color: @font-color-66;
        }
        .form {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            box-sizing: border-box;
            padding: 0 16px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 32px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .register-page {
      position: relative;
      justify-content: flex-start;
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-header {
        display: block;
      }
    }
    .register-box {
      width: 375px;
      height: auto;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: none;
      position: relative;
      .box-bg {
        display: none;
      }
      .left {
        display: none;
      }
      .right {
        padding: 24px 16px;
        width: 375px;
        height: auto;
        box-sizing: border-box;
        background: transparent;
        .title {
          margin-top: 24px;
          color: @font-color-14;
          text-align: left;
        }
        .desc {
          margin-top: 8px;
          font-size: 14px;
          color: @font-color-99;
          text-align: left;
        }
        .form {
          margin-top: 24px;
          padding: 0;
          .el-form-item {
            margin-bottom: 10px;
          }
          .theme-btn {
            box-sizing: border-box;
            padding: 0 8px;
            height: 48px;
            margin-left: 0;
            margin-top: 14px;
          }
        }
        .pc-form {
          display: none;
        }
        .mobile-form {
          display: block;
        }
      }
    }
    /deep/.base-info {
      // margin-top: 82px;
      padding-bottom: 86px;
    }
    .mobile-dialog {
      display: block;
      /deep/ .el-dialog {
        width: 293px;
        background: @color-ff;
        border-radius: 12px;
        .el-dialog__header,
        .el-dialog__footer {
          padding: 0;
        }
        .el-dialog__body {
          padding: 0;
        }
      }
      .register-check-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28px;
        .top-icon {
          margin-top: 20px;
          width: 88px;
          height: 88px;
        }
        .title {
          margin-top: 12px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          margin-top: 12px;
          text-align: center;
          font-size: 14px;
          color: @font-color-66;
        }
        .form {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            box-sizing: border-box;
            padding: 0 8px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 32px;
          }
        }
      }
    }
  }
</style>
